<template>
	<div>
		<el-container style="height: 700px;">
			<el-main>
				<div style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);">
					<el-row style="background-color: #FFFFFF;height: 10px;border-radius: 5px 5px 0 0;"></el-row>
					<el-row class="title">
						<el-col class="lv" :span="3">
							<i class="el-icon-location-information"></i>挂号预约/&nbsp;发票管理/&nbsp;
						</el-col>
						<el-col :span="2" style="color: #303133;font-size: 13px;text-align: left;">
							发票打印
						</el-col>
					</el-row>
					<el-row class="title" style="border-radius: 0 0 5px 5px ;">
						<el-col class="tcon" :span="3" style="font-size: 25px;text-align: center;">发票打印</el-col>
					</el-row>
				</div>

				<el-row style="background-color: Transparent;height:20px"></el-row>
				<div style="border-radius: 5px 5px 5px 5px;background-color: #FFFFFF;border: solid 1px #DCDFE6;">

					<el-row style="height: 20px;border-radius: 5px 5px 0 0;"></el-row>
					<el-row>
						<el-col :span="3" class="item">患者信息查询：</el-col>
					</el-row>
					<el-row style="height: 5px;"></el-row>
					<el-form :inline="true" :model="numberValidateForm" class="demo-form-inline" rules="rules"
						style="text-align:left;height: 50px;">
						<el-col :span="7" style="text-align: right;">
							<el-form-item label="病历号 :" class="label01" prop="id" :rules="[
				      { required: true, message: '病历号不能为空'}]">
								<el-input v-model="numberValidateForm.id" placeholder="请输入病历号" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="3">
							<el-form-item>
								<el-button type="primary" @click="onSubmit" icon="el-icon-search">查询</el-button>
							</el-form-item>
						</el-col>
						<el-col :span="12" style="text-align: right;">
							<el-button @click="printing" icon="el-icon-printer"
								style=" text-align: right; height: 70px;width: 150px;background-color: royalblue;color: white;font-size: large;">
								打印发票</el-button>
						</el-col>
					</el-form>


					<!-- <el-row style="height: 4px;"></el-row> -->
					<el-row>
						<el-col :span="3" class="item">基本信息确认：</el-col>
					</el-row>
					<el-row style="height: 5px;"></el-row>
					<el-row style="heiht: 50px">
						<el-form :inline="true" :model="numberValidateForm" class="demo-form-inline" :rules="rules">

							<el-col :span="6" style="text-align: center;">
								<!-- &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; -->

								<el-form-item label="姓 名 :" prop="name" style="line-height:50px ;">
									<el-input v-model="name" placeholder="姓名" autocomplete="off" clearable
										style="width: 150px;"></el-input>
								</el-form-item>

							</el-col>
							<el-col :span="8">
								<el-form-item label="身份证号 :" prop="id_number" style="line-height: 50px;">
									<el-input v-model="id_number" placeholder="身份证号" autocomplete="off" maxlength="18"
										clearable>
									</el-input>
								</el-form-item>
							</el-col>
							<el-col :span="7">
								<div class="grid-content bg-purple">
									<el-form-item label="家庭地址 :" class="label04" prop="address">
										<el-input v-model="address" placeholder="家庭地址" autocomplete="off" clearable
											style="width: 240px;"></el-input>
									</el-form-item>
								</div>
							</el-col>

						</el-form>
					</el-row>
					<!-- <el-row style="height: 10px;"></el-row>
					 表格行高格式设置:cell-style="{padding:'5px 0',textAlign:'center'}" :header-cell-style="{textAlign:'center'}"-->
					<el-row>
						<el-col :span="3"
							style="text-align: right; font-size: 16px; font-family: 'arial black';font-size: large;">
							缴费信息：
						</el-col>
						<el-col :span="19" style="text-align: right;font-size: 17px;color: #F56C6C;font-weight: bold;">
							总价：￥ <el-tag
								style="border:solid 1px white ; background-color: white;color: black; font-size: 17px;">
								{{sum_price_view}}
							</el-tag>
						</el-col>
					</el-row>
					<el-row style="height: 5px;"></el-row>
					<el-row>
						<el-table height="380" ref="multipleTable" :data="tableData" tooltip-effect="dark" stripe border
							:cell-style="{textAlign:'center'}" :header-cell-style="{textAlign: 'center'}"
							style="width: 92%;" @selection-change="handleSelectionChange">
							<el-table-column type="selection" :selectable="sele">
							</el-table-column>
							<el-table-column prop="name" label="患者姓名">
							</el-table-column>
							<el-table-column prop="id" label="病历号">
							</el-table-column>
							<el-table-column prop="invoice_id" label="发票号">
							</el-table-column>
							<el-table-column prop="date" label="看诊日期" show-overflow-tooltip>
							</el-table-column>
							<el-table-column prop="price" label="总金额">
							</el-table-column>
							<el-table-column label="发票状态">
								<template slot-scope="scope">
									<span v-if="scope.row.invoice_status==='未打印'" style="color: green">未打印</span>
									<span v-else-if="scope.row.invoice_status==='已打印'" style="color:red;">已打印</span>
								</template>
							</el-table-column>
						</el-table>
					</el-row>
					<el-row style="height: 20px;"></el-row>
					<el-row>
						<el-col :span="23">
							<!-- <div style="padding-right: 24px;">
								<el-pagination background style="text-align: center;" @size-change="handleSizeChange"
									@current-change="handleCurrentChange" :current-page.sync="currentPage"
									:page-size="100" layout="prev, pager, next, jumper" :total="1000">
								</el-pagination>
							</div> -->
						</el-col>

					</el-row>
					<el-row style="height: 20px;"></el-row>
				</div>
			</el-main>
		</el-container>
	</div>
</template>

<script>
	import {
		getRequest
	} from '@/utils/api'
	export default {
		mounted: function() {
			let url = "/fpdy";
			let _this = this;
			getRequest(url).then(resp => {
				if (resp.status == 200) {
					//alert(resp.data);
					_this.fpdy = resp.data;
				} else {
					_this.$message({
						type: 'error',
						message: '数据加载失败!'
					});
				}
			}, resp => {
				_this.loading = false;
				if (resp.response.status == 403) {
					_this.$message({
						type: 'error',
						message: resp.response.data
					});
				} else {
					_this.$message({
						type: 'error',
						message: '数据加载失败!'
					});
				}
			}).catch(resp => {
				//压根没见到服务器
				_this.loading = false;
				_this.$message({
					type: 'error',
					message: '数据加载失败!'
				});
			});
		},
		data() {
			return {
				fpdy: [{
					id: '',
					name: '',
					id_number: '',
					address: '',
					list: [{
						name: '',
						id: '',
						invoice_id: '',
						date: '',
						price: '',
						invoice_status: ''
					}]
				}],
				sum_price_view: '0.00',
				// currentPage: 1,
				numberValidateForm: {
					id: '',
					id_number: '',
					name: '',
					address: ''
				},
				num: '',
				name: '',
				tableData: [],
				multipleSelection: []
			}
		},
		methods: {
			sele(row, index) {
				if (row.invoice_status === '已打印') {
					return true;
				} else
					return false;
			},
			onSubmit() {
				let infors = this.fpdy;
				infors.forEach(item => {
					if (item.id === this.numberValidateForm.id) {
						this.name = item.name;
						this.id_number = item.id_number;
						this.address = item.address;
						this.tableData = item.list;
					}
				})
			},
			printing() {
				let confirm_price = "是否确认打印发票";
				this.$confirm(confirm_price, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
					center: true
				}).then(() => {
					this.$message({
						type: 'success',
						message: '打印成功!'
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消打印'
					});
				});
			},
			// handleSizeChange(val) {
			// 	console.log(`每页 ${val} 条`);
			// },
			// handleCurrentChange(val) {
			// 	console.log(`当前页: ${val}`);
			// },
			toggleSelection(rows) {
				if (rows) {
					rows.forEach(row => {
						this.$refs.multipleTable.toggleRowSelection(row);
					});
				} else {
					this.$refs.multipleTable.clearSelection();
				}
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
				let sum_price = 0.00;
				val.forEach(item => {
					let price_num = parseFloat(item.price);
					sum_price += price_num;
				});
				this.sum_price_view = sum_price.toFixed(2);
			}
		}
	}
</script>

<style scoped="scoped">
	* {
		main: 0px;
		padding: 0px;
		text-decoration: none;
		list-style: none;
	}

	.el-container {
		/* background-color: #EBEEF5; */
		background-color: white;
	}

	.title {
		height: 45px;
		background-color: #FFFFFF;
		font-family: "微软雅黑";
		font-weight: bold;
	}

	.lv {
		font-size: 13px;
		color: #909399;
		text-align: right;
	}

	.tcon {
		font-size: 20px;
		color: #303133;
		text-align: right;
	}

	.item {
		font-size: 18px;
		font-family: "微软雅黑";
		text-align: right;
	}

	.str {
		font-size: 14px;
		text-align: right;
		line-height: 40px;
		font-family: "Hiragino Sans GB";
	}

	.inp {
		text-align: right;
		line-height: 40px;
	}

	.but {
		text-align: center;
		line-height: 40px;
	}

	.el-table {
		margin: auto;
	}

	.over {}
</style>
